<template>
  <div class="search">
    <van-search
      v-model="value"
      placeholder="请输入企业名、企业信息等关键词搜索"
    />
    <van-row style="margin-top: 50px">
      <van-col span="12">
        <van-badge>
          <div class="badge" />
        </van-badge>
        <div class="text" @click="jump2relation">关联关系查询</div></van-col
      >
      <van-col span="12"
        ><van-badge>
          <div class="badge" />
        </van-badge>
        <div class="text" @click="jump2condition">条件查询</div></van-col
      >
    </van-row>
    <van-row style="margin-top: 30px">
      <van-col span="12">
        <van-badge>
          <div class="badge" />
        </van-badge>
        <div class="text">风险监控</div></van-col
      >
      <van-col span="12"
        ><van-badge>
          <div class="badge" />
        </van-badge>
        <div class="text">数据统计</div></van-col
      >
    </van-row>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, Badge } from "vant";

Vue.use(Search);
Vue.use(Badge);

export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    jump2relation() {
      this.$router.push('/search/association');
    },
    jump2condition() {
      this.$router.push('/search/condition');

    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search {
  text-align: center;
}
.badge {
  width: 40px;
  height: 40px;
  background: #f2f3f5;
  border-radius: 4px;
}

.text {
  text-align: center;
}
</style>
